{% extends 'web/base.html' %}
{% load staticfiles %}
{% block base_title %} 支付 {% endblock %}

<!--{% block manifest %}appcache/tui.appcache{% endblock %}-->
{% block base_run %}tui{% endblock %}

{% block base_body %}
{% verbatim %}
<div class="scroll all_bg" id="tui">
    <div v-if="loading"></div>
    <div v-else class="load_fix">
        <div class="zuan_center" style="background:none;">
            <div class="ui active centered inline loader red" style="top: 50%;transform: scale(.6)"></div>
        </div>
    </div>

    <div class="zuan_guan">
        <div class="zuan_song">
            <ul class="zuan_song_box">
                <li v-for="tui in zuanChan">
                    <div @click="now()" onclick="localStorage.setItem('tid',$(this).attr('tid'))" :tid="tui.product.p_id" class="zuan_song_img">
                        <!---->
                        <img :src="'http://www.zgtxcj.com/'+tui.product.p_image">
                    </div>
                    <p class="zuan_song_t">{{ tui.product.p_name }}</p>
                </li>
            </ul>
        </div>
        <div class="zuan_guan_ti">
            注：投资有风险，操作需谨慎
        </div>
    </div>
    <div class="zuan_fix_bg" style="display:none"></div>
    <div class="zuan_fix scroll" style="display:none">
        <div class="zuan_fix_con">
            <div class="zuan_fix_con_clo" @click="close()"></div>
            <div class="zuan_fix_title">
                <!--<i :style="background:url('http://www.zgtxcj.com/'+zuanFu.p_image)"></i>{{ zuanFu.p_name }}-->
            </div>
            <div class="zuan_fix_txt" v-html="zuanFu.p_serverdetail"></div>
        </div>
    </div>
</div>
{% endverbatim %}

{% endblock %}
{% block base_script %}
    var tui = new Vue({
        el:'#tui',
        data:{
            zuanId:localStorage.getItem('tuiid'),
            zuanChan:[],
            zuanNa:[],
            zuanFu:[],
            loading: false,
        },
        methods:{
            getZuanN:function(){
                var self = this;
                reqwest({
                    url:'http://api.zgtxcj.com/txcjapi/indiamonds/?tag=diamonds&id='+self.zuanId,
                    method:'get',
                    type:'json',
                    success:function(resp){
                        self.zuanNa=resp;self.loading=true;
                    }
                })
            },
            getTuiso:function(){
                var self = this;
                reqwest({
                    url:'http://api.zgtxcj.com/txcjapi/indiamonds/?tag=diapro&id='+self.zuanId,
                    method:'get',
                    type:'json',
                    success:function(resp){
                        for (var k in resp){
                            resp[k]['product']['p_image']= resp[k]['product']['p_image'].split('|')[0];
                            if(resp[k]['dp_tag']==1){
                                self.zuanChan.push(resp[k]);
                            }
                        }
                        self.tuiOver();
                    }
                })
            },
            tuiOver:function(){
                this.$nextTick(function () {
                    if($('.zuan_song').height()<($('html').height()-$('.zuan_guan_t').height()-100)){
                        $('.zuan_guan').height($('body').height())
                    }else {
                        $('.zuan_guan_ti').css('position','relative')
                    }
                })
            },
            now:function(){
                var self=this;
                reqwest({
                    url:'http://api.zgtxcj.com/mobile/udiaserver/',
                    methon:'gett',
                    type:'json',
                    data:{
                        did:localStorage.getItem('tuiid'),
                        uid:localStorage.getItem('uid'),
                        pid:localStorage.getItem('tid')
                    },
                    success:function(resp){
                        self.zuanFu=[];
                        resp['message']['p_image']=resp['message']['p_image'].split('|')[0];
                        if(resp['message']['p_serverdetail']==null){

                        }else {
                            resp['message']['p_serverdetail']=resp['message']['p_serverdetail'].replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&quot;/g,'').replace(/&amp;nbsp;/g,'').replace(/src=/g,'src=http://www.zgtxcj.com').replace(/(\s{2,80})/g,'<br>').replace(/nbsp;/g,'').replace(/<br>/g,'').replace(/<img /g,'<img width=100% height=100% onclick=javascript:window.open(this.src);').replace(/alt=/g,'&nbsp;');
                        }
                        self.zuanFu=resp['message'];
                        self.getClick();
                    }
                })
            },
            getClick:function(){
                this.$nextTick(function () {

                    $('.zuan_fix_bg').css('display','block');
                    $('.zuan_fix').css('display','block');
                })
            },
            close:function(){
                $('.zuan_fix_bg').css('display','none');
                $('.zuan_fix').css('display','none');
            },
            run:function () {
                this.getZuanN();
                this.getTuiso();
            }
        },
    })
{% endblock %}